﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BuyCardTG.aspx.cs" Inherits="Yule8xWechat.Payment.WxPay.BuyCardTG" %>

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>购买八星游戏金豆</title>
    <link rel="stylesheet" type="text/css" href="/Skin/Theme/Css/comm.css" />
    <link rel="stylesheet" type="text/css" href="/Skin/Theme/Css/icon.css" />
    <link rel="stylesheet" type="text/css" href="/Skin/Theme/Css/my.css" />
    <!--轮播增加代码部分-->
    <link rel="stylesheet" href="/Skin/Theme/Plugins/idangerous/idangerous.swiper.css">
    <!--轮播增加代码部分-->
    <script src="/Skin/Theme/Js/flexible_css.js" type="text/javascript" charset="utf-8"></script>
    <script src="/Skin/Theme/Js/flexible.js" type="text/javascript" charset="utf-8"></script>

    <!--轮播增加代码部分-->
    <style>
        /* Demo Syles */
        .swiper-container {
            height: 2.7rem;
            width: 7.5rem;
            border-bottom: 1px solid #e6e6e6;
            border-top: 1px solid #e6e6e6;
        }

        .swiper-slide > img {
            width: 7.5rem;
            height: 2.7rem;
        }

        .pagination {
            position: absolute;
            left: 0;
            text-align: center;
            bottom: 0.05rem;
            width: 100%;
        }

        .swiper-pagination-switch {
            display: none;
            width: 0.1rem;
            height: 0.1rem;
            border-radius: 10px;
            background: #999;
            box-shadow: 0px 1px 2px #555 inset;
            margin: 0 3px;
            cursor: pointer;
        }

        .swiper-active-switch {
            background: #fff;
        }
    </style>
    <!--轮播增加代码部分-->
</head>

<body>
    <script src="/Skin/Theme/Js/jquery_2.1.3.js" type="text/javascript" charset="utf-8"></script>
    <script src="/Skin/Plugins/DialogLib/layer-v3.0.1/layer.js" type="text/javascript"></script>
    <div class="content">
        <!--头部欢迎信息-->
        <div class="welcome">欢迎您,<%=wxUser.nickname %></div>
        <!--轮播广告图-->
        <div class="slidebanner">
            <!--轮播增加代码部分-->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="/Skin/Theme/Images/buycard/banner2.jpg">
                    </div>
                    <div class="swiper-slide">
                        <img src="/Skin/Theme/Images/buycard/banner3.jpg">
                    </div>
                </div>
                <div class="pagination"></div>
            </div>
            <!--轮播增加代码部分-->
        </div>
        <form method="post" action="BuyCardTG.aspx?user_id=<%=user_id %>">
            <!--充值区域开始-->
            <div class="choosegame">
                <div class="gameicon" style="margin-top:10px;">
                    <% if (game_mact_id == 1)
                        { %>
                    <span class="iconp"><img id="bozhongicon" src="/Skin/Theme/Images/my/btn_05.png"></span>
                    <%}    else if (game_mact_id == 2)
    { %>
                    <span class="iconp"><img id="wanghuicon" src="/Skin/Theme/Images/my/btn_03.png"></span>
                    <%} %>
                </div>
            </div>                
            

            <div id="payforme" style="height: 0.2rem"></div>
            <div class="cardcount">
                <ul id="pricelist" data-url="/PublicServices/GameService.aspx?game_mact_id=varid">
                <li class="buyactive" data-amount="100" data-number="100" data-id="1">100颗</li>
                <li data-amount="150" data-number="150" data-id="2">150颗</li>
                </ul>
            </div>
            <div class="clear"></div>
            
            <div class="buytotal">
                购买 <span style="color: #4e77f8" id="total_count">00</span> 颗 共计  <span style="color: #ff514e" id="amount">00.00</span> 元
            </div>
            <div class="bykefu" style="height:auto; line-height:0.5rem; padding:0.1rem; margin-top:0;">
                <%=timetip %>
                <div>玩家群号  <span style="color: #fc4f4f">632916054</span></div>
                <div>充值或游戏有遇到任何问题请加 <span style="color: #4e74f3">客服QQ <a href="mqqwpa://im/chat?chat_type=wpa&uin=1730151367&version=1&src_type=web&web_src=oicqzone.com" target="_blank">1730151367</a></span></div>
            </div>
            <div class="paybutton">
                <button type="submit" style="border: none; background: none;">
                    <div class="buttonimg">
                        <img src="/Skin/Theme/Images/paybtn.png">
                    </div>
                </button>
            </div>
            <!--隐藏文本域-->
            <input type="hidden" name="payfor" id="payfor" value="payforme" />
            <input type="hidden" name="game_mact_id" id="game_mact_id" value="<%=game_mact_id %>" />
            <input type="hidden" name="game_id" value="<%=game_id > 0 ? game_id.ToString() : string.Empty %>" />
            <input type="hidden" name="amount" value="0" />
            <input type="hidden" id="number" name="number" value="0" />
            <input type="hidden" name="pay_method" value="trade.weixin.jspay" />
            <input type="hidden" id="event_rate" name="event_rate" value="<%=event_rate %>" />
            <input type="hidden" id="event_coin_number" name="event_coin_number" value="<%=event_coin_number %>" />
            <input type="hidden" name="action" value="submit" />
        </form>
    </div>
    <!--轮播增加代码部分-->
    <script src="/Skin/Theme/Plugins/idangerous/idangerous.swiper.min.js"></script>
    <script>
        $('.payway li').click(function () {
            $('.payway li').removeClass('pactive');
            $(this).addClass('pactive');
            $('[name="pay_method"]').val($(this).data('value'));
        })
        $('#bozhongicon').click(function () {
            $(this).attr('src', '/Skin/Theme/Images/my/btn_05.png');
            $('#wanghuicon').attr('src', '/Skin/Theme/Images/my/btngray_03.png');
            $('#game_mact_id').val(1);
            load_price_labels(1);
        })

        $('#wanghuicon').click(function () {
            $('#bozhongicon').attr('src', '/Skin/Theme/Images/my/btngray_05.png');
            $(this).attr('src', '/Skin/Theme/Images/my/btn_03.png');
            $('#game_mact_id').val(2);
            load_price_labels(2);
        })
        load_price_labels($('#game_mact_id').val());
        function load_price_labels(game_mact_id) {
            var event_coin_number = $('#event_coin_number').val();
            var url = $('#pricelist').data('url');
            $.get(url.replace('varid', game_mact_id), function (data) {
                if (typeof (data) == 'object') {
                    var str = '';
                    for (var idx in data) {
                        if(event_coin_number > 0 && event_coin_number == data[idx].Text){
                            str += '<li data-amount="' + data[idx].Value + '" data-number="' + data[idx].Text + '" data-id="' + data[idx].ID + '" class="doublerate">' + data[idx].Text + '颗<i></i></li>';
                        }else{
                            str += '<li data-amount="' + data[idx].Value + '" data-number="' + data[idx].Text + '" data-id="' + data[idx].ID + '">' + data[idx].Text + '颗</li>';

                        }
                    }
                    $('#pricelist').html(str).find('li:first-child').addClass('buyactive');
                    var number = $('#pricelist').find('.buyactive').data('number');
                    $('#number').val(number);
                    
                } else {
                    layer.msg('获取价格列表出错!');
                }
            })
        }
        var mySwiper = new Swiper('.swiper-container', {
            pagination: '.pagination',
            loop: true,
            grabCursor: true,
            paginationClickable: true,
            autoplay: 5000,
        })
        $('.arrow-left').on('click', function (e) {
            e.preventDefault()
            mySwiper.swipePrev()
        })
        $('.arrow-right').on('click', function (e) {
            e.preventDefault()
            mySwiper.swipeNext()
        })
    </script>
    <!--轮播增加代码部分-->
    <script type="text/javascript">
        $('.nav-tabs li a').click(function () {
            var $this = $(this);
            $this.parent().parent().find('a').removeClass('active');
            $this.addClass('active');
            var id = $this.data('id');
            $('#payfor').val(id);
            if ('payforother' == id) {
                $('#payforother').show();
                $('#payforme').hide();
            } else {
                $('#payforother').hide();
                $('#payforme').show();
            }
            return false;
        })
        $(".cardcount").delegate('li', 'click', function () {
            var $this = $(this);
            $this.toggleClass("buyactive").siblings().removeClass("buyactive");
            $('#number').val($this.data('number'));
            //$('#moneyvalueid').val($this.data('id'));
            settlement();
        });
        function settlement() {
            var number = $('#number').val();
            if (isNaN(number) || number < 1) {
                return;
            }
            var price = 1;
            var total = (number * price).toFixed(2);
            var event_coin_number = $('#event_coin_number').val();
            if (event_coin_number > 0 && event_coin_number == number) {
                var event_rate = $('#event_rate').val();
                number=number * event_rate;
            }
            $('#total_count').text(number);
            $('input[name="amount"]').val(total);
            $('#amount').text(total);
        };
        settlement();
        setInterval(settlement, 2000);
    </script>
</body>
</html>
